<template>
	<!-- 首页暂时不需要 导航栏-->
	<view>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view class="container" v-show="!showLoading">
			<!-- 背景图片 -->
			<img :src="imageSrc" alt="背景图片" class="background-image" />
			<!-- 登录/注册 -->
			<view class="login-box" v-if="!isLogin" @click="goToWxLogin()">
				<!-- 里面的文字 -->
				<view class="login-zi">
					登录/注册
				</view>
			</view>

			<!-- banner主图 -->
			<view :class="['banner', { 'logged-in': isLogin }]" >
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in bannerData" @click="jump(item)">
						<image :src="item.image" mode="">
						</image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 扫码核销和积分商店页面 -->
			<view :class="['center', { 'logged-in-center': isLogin }]">
				<!-- 左边的扫码核销 -->
				<view class="scan-box"  @click="navigate('/pages/mine/member',1)">
					<!-- 文字标题 -->
					<view class="scan-title">会员码</view>
					<!-- 介绍 -->
					<view class="scan-dec">我的会员码</view>
					<!-- 图标 -->
					<view class="scan-icon">
						<image src="../../static/icon1.png" mode=""></image>
					</view>
				</view>

				<!-- -----------------------右边积分商店部分 -->
				<view class="center-box-right" @click="navigate('/pages/goods/list',1)">
					<!-- 商店标题 -->
					<view class="store-title">积分商店</view>
					<!-- 商店简介 -->
					<view class="store-dec">会员独享*兑换大牌商品</view>
					<!-- 商店icon -->
					<view class="store-icon">
						<image src="../../static/icon2.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- --------------------登录状态栏------------------ -->
			<view :class="['statsu', { 'logged-in-statsu': isLogin }]" @click="navigate('/pages/mine/mine',1)">
				<!-- 左边 -->
				<view class="statsu-left">
					<!-- 上面的字 -->
					<view class="statsu-title">我的</view>
					<view class="statsu-now" v-if="!isLogin">您尚未登录</view>
					<view class="statsu-now" v-else>欢迎您，{{ information.nickname }}</view>
				</view>


				<!-- 右边的东西 -->
				<view class="statsu-right">
					<image src="../../static/icon3.png" mode=""></image>
				</view>
			</view>

			<!-- ------------------推荐-------------------------- -->
			<view :class="['bottom-recommon', { 'bottom-recommon-log': isLogin }]">
				<!-- 推荐标题 -->
				<view class="recommon-title">推荐商品</view>
				<!-- 更多 -->
				<view class="recommon-more" @click="navigate('/pages/goods/list',1)">更多商品 ></view>
				<!-- 推荐商品列表 -->
				<view class="recommon-goods-list" v-if="goodslist.length">
					<!-- 推荐单页 -->
					<view class="recommon-goods-nav" v-for="(item,index) in goodslist" :key="item.index">
						<navigator :url="item.url">
							<!-- 上面的图片 -->
							<view class="recommon-img">
								<image :src="item.image" mode=""></image>
							</view>

							<!-- 标题 -->
							<view class="recommon-goods-title">{{ item.name }}</view>
							<!-- 积分价格 -->
							<view class="recommon-goods-price">{{ item.integral}}积分</view>

						</navigator>

					</view>
				</view>
				<view v-else>
					<u-empty description="暂无数据"></u-empty>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '../../common/apiService';
	import request from '../../common/request';

	const {
		getBanner,
		getRecommendList,
		getUserIntegral
	} = api;
	
	

	export default {
		data() {
			return {
				imageSrc: require('../../static/bg.png'),
				showLoading: true,
				isLogin: false,
				avatar: '',
				avatarLogo: request.baseUrl + 'img/avatar.png',
				nickName: '',
				isAuth: true,
				goodslist: [],
				bannerUrl: '',
				bannerLink: '',
				link_type:0,
				bannerData:[],
				information: {
					avatar: '',
					id: 0,
					nickname: '',
					sn: ''
				}
			};
		},
		mounted() {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.isLogin = true;
				const currentUser = uni.getStorageSync('currentUser');
				this.avatar = currentUser.avatar;
				this.nickName = currentUser.nickname;
			} else {
				this.isLogin = false;
			}


			Promise.all([getBanner(), getRecommendList()])
				.then(([bannerData, recommendData]) => {
					console.log("卢波图",bannerData);
					this.bannerData = bannerData
					this.bannerUrl = bannerData ? bannerData[0].image : '';
					this.bannerLink = bannerData ? bannerData[0].link : 0;
					this.link_type = bannerData ? bannerData[0].link_type : 0;
					this.goodslist = recommendData?.list.map(item => ({
						...item,
						url: `/pages/goods/info?id=${item.id}`
					}));
				})
				.catch(error => {
					// console.log(error);
					uni.showToast({
						title: error.message || '请求失败，请稍后再试',
						icon: 'none'
					});
				})
				.finally(() => {
					this.showLoading = false;
				});
		},
		onLoad(){
			this.loginfo()
		},
		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					// uni.showToast({
					// 	// title:'请先登录',
					// 	// icon:'error'
					// }).then
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/auth/wxrole'
							})
						},100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			jump(item){
				if(item.link_type==3){
					uni.navigateTo({
						url:`/pages/webView/webView?url=${encodeURIComponent(item.link)}`
					})
				}
				if(item.link_type==2){
					uni.navigateTo({
						url:`/pages/goods/info?id=`+item.link
					})
				}
				
				console.log("得到",item)
			},
			goToWxLogin() {
				uni.navigateTo({
					url: '/pages/auth/wxrole'
				});
			},
			sureorder(selffetch_shop_id,id){
				const uid = uni.getStorageSync('uid')
				uni.request({
					url:request.baseUrl + 'o-order_write_off_confirm',
					method:'POST',
					data:{
						uid:uid,
						selffetch_shop_id:selffetch_shop_id,
						id:id
					},
					success(res) {
						console.log(res)
					}
				})
			},
			// scan() {
			// 	const _this = this
			// 	uni.scanCode({
			// 		success: function(res) {
			// 			// console.log('条码类型：' + res.scanType);
			// 			console.log('条码内容：' + res.result);
			// 			const result = res.result.split('&');
			// 			const id = result[0];
			// 			const selffetch_shop_id = result[1];
			// 			_this.sureorder(selffetch_shop_id,id)
			// 		}
			// 	})
			// },
			// 获取个人信息
			loginfo() {
				const uid = uni.getStorageSync('uid');
				getUserIntegral(uid).then(res => {
					this.information = res;
					console.log(res);
				}).catch(e => {
					console.log(e);
				})

			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		/* 使容器占满整个视口高度 */

		.background-image {
			width: 100%;
			height: 125vh;
			object-fit: cover;
			// background-repeat:repeat-y;
			/* 使图片覆盖整个容器 */
			position: absolute;
			/* 使图片绝对定位 */
			top: 0;
			left: 0;
			z-index: -1;
			/* 将图片放在文字后面 */
		}

		// 注册登录
		.login-box {
			width: 400rpx;
			height: 73rpx;
			background: #ffffff;
			position: absolute;
			margin: 250rpx 165rpx 46rpx 174rpx;
			border-radius: 40rpx;

			.login-zi {
				width: 150rpx;
				height: 28rpx;
				// border: 1px solid red;
				font-size: 30rpx;
				line-height: 28rpx;
				color: #004097;
				margin: 22rpx 133rpx 23rpx 134rpx;
				font-weight: 500;
			}
		}

		// 主页
		.banner {
			width: 690rpx;
			height: 320rpx;
			line-height: 320rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 369rpx 29rpx 0 30rpx;

			&.logged-in {
				margin: 200rpx 29rpx 0 30rpx;
			}

			swiper {
				width: 690rpx;
				height: 320rpx;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 中间扫码核销，积分商店
		.center {
			width: 690rpx;
			height: 280rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 719rpx 29rpx 0 30rpx;
			display: flex;

			&.logged-in-center {
				margin: 543rpx 29rpx 0 30rpx;
			}

			// 左边扫码盒子
			.scan-box {
				width: 330rpx;
				height: 280rpx;
				background: #ffffff;
				border-radius: 20rpx;

				.scan-title {
					width: 150rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: #000000;
					font-size: 30rpx;
					margin: 43rpx 0 0 32rpx;
					// padding: 43rpx 0 0 32rpx;
				}

				.scan-dec {
					width: 200rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 15rpx 0 0 32rpx;
				}

				// 图标
				.scan-icon {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					margin: 45rpx 0 0 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


			// 右边商店盒子
			.center-box-right {
				width: 330rpx;
				height: 280rpx;
				// border: 1px solid green;
				background: #ffffff;
				border-radius: 20rpx;
				margin: 0 0 0 30rpx;

				.store-title {
					width: 130rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: #000000;
					font-size: 30rpx;
					margin: 43rpx 0 0 32rpx;
					// padding: 43rpx 0 0 32rpx;
				}

				.store-dec {
					width: 300rpx;
					height: 19rpx;
					// border: 1px solid red;
					color: #666666;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 19rpx;
					padding: 15rpx 0 0 32rpx;
				}

				.store-icon {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					// padding: 45rpx 0 0 33rpx;
					margin: 45rpx 0 0 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		// 登录状态
		.statsu {
			width: 690rpx;
			height: 190rpx;
			// border: 1px solid red;
			position: absolute;
			margin: 1019rpx 30rpx 0 29rpx;
			background: #ffffff;
			border-radius: 30rpx;
			display: flex;

			&.logged-in-statsu {
				margin: 843rpx 30rpx 0 29rpx;
			}


			// 状态左边
			.statsu-left {
				width: 120rpx;
				height: 103rpx;
				// border: 1px solid red;
				margin: 53rpx 0 0 33rpx;

				.statsu-title {
					width: 80rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}

				// 是否登录
				.statsu-now {
					width: 250rpx;
					height: 20rpx;
					font-size: 20rpx;
					line-height: 20rpx;
					// border: 1px solid green;
					padding: 20rpx 0 0 0;
					color: #666666;
					font-weight: 400;
				}
			}


			// 右边的
			.statsu-right {
				width: 120rpx;
				height: 103rpx;
				line-height: 103rpx;
				// border: 1px solid red;
				margin: 40rpx 45rpx 47rpx 350rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		//底部推荐	 
		.bottom-recommon {
			width: 690rpx;
			height: 720rpx;
			// height: calc(700rpx+);
			// border: 1px solid red;
			padding-bottom: 20rpx;
			position: absolute;
			margin: 1226rpx 29rpx 54rpx 30rpx;
			background: #ffffff;
			border-radius: 30rpx;
			overflow: hidden;

			&.bottom-recommon-log {
				margin: 1050rpx 29rpx 54rpx 30rpx;
			}

			.recommon-title {
				width: 200rpx;
				height: 28rpx;
				// border: 1px solid red;
				line-height: 28rpx;
				margin: 43rpx 0 0 26rpx;
				font-size: 30rpx;
				font-weight: 500;
			}
			.recommon-more {
				width: 200rpx;
				height: 28rpx;
				// border: 1px solid red;
				line-height: 28rpx;
				margin: -28rpx 0 0 510rpx;
				font-size: 30rpx;
				font-weight: 500;
			}

			.recommon-goods-list {
				width: 650rpx;
				// height: 274rpx;
				max-height: 600rpx;
				overflow: auto;
				padding-bottom: 30rpx;
				// border: 1px solid red;
				margin: 18rpx 23rpx 0 19rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				/* 一行三个盒子，每个盒子宽190rpx */
				grid-gap: 40rpx;
				/* 盒子之间的间距 */


				.recommon-goods-nav {
					width: 190rpx;
					height: 274rpx;
					// border: 1px solid red;

					.recommon-img {
						width: 190rpx;
						height: 190rpx;
						// border: 1px solid red;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.recommon-goods-title {
						width: 180rpx;
						height: 35rpx;
						line-height: 35rpx;
						// border: 1rpx solid red;
						font-size: 24rpx;
						margin: 13rpx auto;
						color: #778090;
						font-weight: 400;
						overflow: hidden;
						/* 隐藏超出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.recommon-goods-price {
						width: 180rpx;
						height: 23rpx;
						line-height: 23rpx;
						color: #ee7900;
						// border: 1px solid red;
						margin: 29rpx 0 0 5rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>